import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      userName: 'niko',
      password: '',
      isAgree: false,
      hobbies: [
        { value: 'sing', text: '唱', isChecked: false },
        { value: 'play', text: '打游戏', isChecked: false },
        { value: 'movie', text: '看电影', isChecked: false }
      ],
      fruit:'apple',
      color: ['red'],
      intro: '介绍'
    }
  }

  handleInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  // checkbox单选
  handleCheckBoxChange(e) {
    // checkbox或者radio取的是checked的值
    console.log(e.target.checked);
    this.setState({
      isAgree: e.target.checked
    })
  }

  // checkbox多选
  handleMultiCheck(e, index) {
    const hobbies = [...this.state.hobbies]
    hobbies[index].isChecked = e.target.checked
    this.setState({ hobbies })
  }

  // select单选
  handleSelect(e) {
    console.log(e.target.value);
    this.setState({ fruit: e.target.value })
  }

  // select多选
  handleMultiSelect(e) {
    console.log(Array.from(e.target.selectedOptions).map(item => item.value));
    const color = Array.from(e.target.selectedOptions).map(item => item.value)
    this.setState({color})
  }

  handleClick(e) {
    e.preventDefault()
    return
  }

  render() {
    const { userName, password, isAgree, hobbies, fruit, color, intro } = this.state
    return (
      <div>
        <form onSubmit={(e) => this.handleClick(e)}>
          <div>            
            用户名:
            <input 
              type="text"
              name="userName"
              value={userName}
              onChange={(e) => this.handleInputChange(e)}
            />
          </div>
          <div>
            密码:
            <input 
              type="password"
              name="password"
              value={password}
              onChange={(e) => this.handleInputChange(e)}
            />
          </div>
          <div>
            {/* checkbox单选 */}
            <label htmlFor="agree">
              <input 
                type="checkbox" 
                id="agree" 
                checked={isAgree} 
                onChange={(e) => this.handleCheckBoxChange(e)}
              /> 同意协议
            </label>
          </div>
          <div>
            选择爱好:
            {/* checkbox多选 */}
            {
              hobbies.map((item, index) => {
                return (
                  <label htmlFor={item.value} key={item.value}>
                    <input 
                      type="checkbox" 
                      id={item.value}  
                      checked={item.isChecked}
                      onChange={(e) => this.handleMultiCheck(e, index)}
                    />
                    {item.text}
                  </label>
                )
              })
            }
          </div>
          <div>
            水果：
            {/* select组件 */}
            <select value={fruit} onChange={e => this.handleSelect(e)}>
              <option value="apple">苹果</option>
              <option value="watermelon">西瓜</option>
              <option value="grape">葡萄</option>
            </select>
          </div>
          <div>
            颜色：
            {/* select组件 */}
            <select multiple value={color} onChange={e => this.handleMultiSelect(e)}>
              <option value="red">红色</option>
              <option value="blue">蓝色</option>
              <option value="green">绿色</option>
            </select>
          </div>
          <div>
            {/* 非受控组件 */}
            <input 
              type="textarea" 
              defaultValue={intro} 
              ref={this.introRef}
            />
          </div>
          <button type="submit">注册</button>
        </form>
      </div>
    )
  }
}

export default App;
